<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div th:include="back/common/cssjs :: main"></div>

    <div class="container">
        <div class="mt-3">
            <h3 class="text-center">商品列表</h3>
            <div class="mt-3 mb-3">
                <a href="add" class="btn btn-success" data-toggle="modal" data-target="#addModal">商品上架</a>
            </div>
            <table id="product_table" class="table table-bordered">
                <tr><th>ID</th><th>商品名</th><th>价格</th><th>操作</th></tr>
                <tr th:id="'pid_' + ${one.id}"   th:each="one:${ProductList}">
                    <td class="id"  th:text="${one.id}"></td>
                    <td class="name"  th:text="${one.name}"></td>
                    <td class="price"  th:text="${one.price}"></td>
                    <td>
                        <a th:onclick="|edit(${one.id})|" href="javascript:void(0)" class="btn btn-warning btn-sm">修改</a>
<!--                        <a th:onclick="|edit2(${one.id})|" href="javascript:void(0)" class="btn btn-info btn-sm">修改2</a>-->
                        <a th:onclick="|del(${one.id})|"  href="javascript:void(0)" class="btn btn-danger btn-sm">下架</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    
    <!-- 添加用的模态框 -->
    <div class="modal fade" id="addModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">添加商品</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" onsubmit="return false;">
                        <div class="form-group">
                            <label for="name">商品名</label>
                            <input name="name" id="name" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="price">价格</label>
                            <input name="price" id="price" type="text" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="add()">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改用的模态框 -->
    <div class="modal fade" id="editModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">修改商品</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="#" onsubmit="return false;">
                        <div class="form-group">
                            <label for="id2">ID</label>
                            <input name="id2" id="id2" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="name2">商品名</label>
                            <input name="name2" id="name2" type="text" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="price2">价格</label>
                            <input name="price2" id="price2" type="text" class="form-control">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="edit_do()">提交</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        //打开修改用的模态框（数据来自于重查一次数据库，发ajax请求）

        function edit2(id) {
            $("#editModal").modal("show");
            $.ajax({
                url:"edit?id="+id,
                dataType:"json",  //text ，json//预期数据的类型
                success:function (data) {
                    console.log(data);  //这个data是商品对象的数据
                    //填充模态框
                    $("#editModal #id2").val(data.id);
                    $("#editModal #name2").val(data.name);
                    $("#editModal #price2").val(data.price);
                }
            })
        }


        //打开修改用的模态框（数据来自于当前页面）
        function edit(id) {
            $("#editModal").modal("show");
            //填第 id 条数据进去
            console.log("修改第"+ id + "条数据");
            var node = $("#product_table  tr[id=pid_"+ id +"]" );

            var id = node.find(".id").text();
            var name = node.find(".name").text();
            var price = node.find(".price").text();

            $("#editModal #id2").val(id);
            $("#editModal #name2").val(name);
            $("#editModal #price2").val(price);
        }
        //执行修改
        function edit_do() {
            $.ajax({
                url:"edit_do",
                data:{
                    id:$("#editModal #id2").val(),
                    name:$("#editModal #name2").val(),
                    price:$("#editModal #price2").val()
                },
                success:function (data) {
                    console.log(data);
                    if(data=="ok"){alert("修改成功"); location.reload(); }
                    else{ alert("失败");  }
                }
            });
        }


        //执行添加
        function add() {
            $.ajax({
                url:"add_do",
                data:{
                    name:$("#name").val(),
                    price:$("#price").val()
                },
                success:function (data) {
                    if(data=="ok"){ location.reload();}
                    else{ alert("添加失败");}
                }
            });
        }
    </script>

    <script>
        function del(id) {
            if(confirm("你真的要删除吗？") ){
                $.ajax({
                    url:"del",
                    data:{
                        id:id
                    },
                    success:function (data) {
                        if(data=='ok') location.reload();
                        else alert("删除失败");
                    }
                });
            }
        }
    </script>


</body>
</html>